@model List<Student>;
<style>
    .student-container {
        max-width: 1200px;
        margin: 20px auto;
        padding: 20px;
    }

    .page-title {
        color: #333;
        margin-bottom: 20px;
        text-align: center;
    }

    .search-container {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
    }

    .search-input {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
    }

    .search-input:focus {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
    }

    .search-button,
    .add-button {
        background-color: #4CAF50;
        color: white;
        padding: 8px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .search-button:hover,
    .add-button:hover {
        background-color: #45a049;
    }

    .add-button {
        margin-bottom: 20px;
    }

    .student-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .student-table th,
    .student-table td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }

    .student-table th {
        background-color: #4CAF50;
        color: white;
    }

    .student-table tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .student-table tr:hover {
        background-color: #ddd;
    }

    .edit-btn,
    .delete-btn {
        padding: 6px 12px;
        margin: 0 4px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .edit-btn {
        background-color: #2196F3;
        color: white;
    }

    .delete-btn {
        background-color: #f44336;
        color: white;
    }

    .edit-btn:hover {
        background-color: #0b7dda;
    }

    .delete-btn:hover {
        background-color: #da190b;
    }
    a{
        text-decoration: none;
    }
    /* 搜索区域容器样式 */
.search-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;  /* 居中显示 */
    width: 100%;
}

/* 搜索表单样式 */
.search-form {
    display: flex;
    gap: 10px;  /* 按钮和输入框之间的间距 */
    width: 60%;  /* 搜索框占据页面宽度的60% */
}

/* 搜索输入框样式 */
.search-input {
    flex: 1;  /* 占据剩余空间 */
    padding: 12px 20px;  /* 增加内边距使输入框变大 */
    border: 2px solid #ddd;  /* 加粗边框 */
    border-radius: 25px;  /* 圆角边框 */
    font-size: 16px;
    transition: all 0.3s ease;
}

/* 输入框焦点样式 */
.search-input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
}

/* 搜索按钮样式 */
.search-button {
    padding: 12px 30px;  /* 增加内边距使按钮变大 */
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 25px;  /* 圆角边框 */
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

/* 搜索按钮悬停效果 */
.search-button:hover {
    background-color: #45a049;
    transform: translateY(-2px);
}
</style>


@* 主页面容器 *@
<div class="student-container">
    <h1 class="page-title">学生管理系统</h1>
@* 搜索区域 *@
<div class="search-container">
    <form asp-action="Index" method="get" class="search-form">
        <input type="text" 
               name="searchString" 
               class="search-input" 
               placeholder="请输入学号、姓名或地址搜索..."
               value="@ViewData["CurrentFilter"]"
               />
        <button type="submit" class="search-button">搜索</button>
     
    </form>
</div>

    @* 添加学生按钮 *@
    <a class="add-button" asp-action="Add">添加学生</a>

    @* 学生信息表格 *@
    <table class="student-table">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @* 遍历学生列表并显示数据 *@
            @foreach (var Student in Model)
            {
                <tr>
                    <td>@Student.Id</td>
                    <td>@Student.StudentName</td>
                    <td>@Student.Age</td>
                    <td>@Student.Address</td>
                    <td>
                        @* 编辑和删除按钮 *@
                        <a class="edit-btn" asp-action="Edit" asp-route-id="@Student.Id">编辑</a>
                        <a class="delete-btn" asp-action="Delete" asp-route-id="@Student.Id">删除</a>
                    </td>
                </tr>
            }
        </tbody>
    </table>
  
</div>
